<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
</head>
<body>
<div class="input-group">
  <i class="input-group-addon">1111</i>
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button class="btn btn-info">按钮</button>
  </div>
</div>


<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username">
  <span class="input-group-addon">@example.com</span>
</div>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" >
  <span class="input-group-addon">.00</span>
</div>


<div class="input-group">
  <span class="input-group-addon" >https://example.com/users/</span>
  <input type="text" class="form-control" >
</div>

<div class="input-group input-group-lg">
  <span class="input-group-addon" >我是左</span>
  <input type="text" class="form-control" >
  <span class="input-group-addon">我是右</span>
</div>

<div class="input-group input-group-md">
  <span class="input-group-addon" >我是左</span>
  <input type="text" class="form-control" >
  <span class="input-group-addon">我是右</span>
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" >我是左</span>
  <input type="text" class="form-control" >
  <span class="input-group-addon">我是右</span>
</div>



<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>